<template>
  <div class="elevator-inquiry">
    <!-- 采购信息部分 -->
    <div class="info-section">
      <div class="title">4层自建房 室内安装400公斤曳引电梯一部</div>
      <div class="time">发布时间：2025-03-06 10:49</div>
      <div class="buyer">采购人：王先生（浙江省/金华市）</div>
      <div class="contact">联系方式：131******</div>
      <van-progress :percentage="100" status="success" />
      <div class="limit-text">已达上限</div>
      <div class="detail">
        我这是4层自建房，自己住，设计在室内安装一部400公斤曳引电梯，井道预留1.7*1.95米，对开门，每层都停，一楼高3.6米，以上都是2.8米高，请生产厂家联系我报价
      </div>
      <div class="notice">该信息已满4个名额，无法再购买了</div>
      <div class="vip-tip">金牌V3会员 比普通会员提前3分钟接收提醒</div>
      <van-button type="danger" round>点击开通金牌V3会员></van-button>
    </div>

    <!-- 接单记录部分 -->
    <div class="order-record-section">
      <div class="sub-title">接单记录</div>
      <div class="link-text">聊聊赚钱那些事</div>
      <van-table border title="接单记录">
        <van-table-column type="index" width="50" />
        <van-table-column title="接单人" key="receiver" />
        <van-table-column title="接单时间" key="time" />
        <van-table-column title="接单条数" key="count" />
      </van-table>
    </div>

    <!-- 最新可接单询盘部分 -->
    <div class="new-inquiry-section">
      <div class="sub-title">最新可接单询盘</div>
      <div class="new-inquiry">
        <div class="inquiry-content">自建房室内采购加装一部2层小型家用电梯，承载2个人</div>
        <div class="inquiry-location">山西省/吕梁市/中阳县</div>
        <van-tag type="success">售后客服</van-tag>
        <van-tag type="danger">5分钟</van-tag>
        <div class="page-info">1/4</div>
      </div>
    </div>

    <!-- 底部导航栏部分 -->
    <van-tabbar v-model:active="active">
      <van-tabbar-item icon="search" @click="handleClick('inquiry')">询盘商机</van-tabbar-item>
      <van-tabbar-item icon="star-o" @click="handleClick('my')">我的商机</van-tabbar-item>
      <van-tabbar-item icon="book" @click="handleClick('skill')">销售技巧</van-tabbar-item>
      <van-tabbar-item icon="user" @click="handleClick('vip')">会员中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 'inquiry'
    }
  },
  methods: {
    handleClick(type) {
      // 处理底部导航栏点击事件
      this.active = type
    }
  }
}
</script>

<style scoped>
.elevator-inquiry {
  padding: 15px;
}
.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.time,
.buyer,
.contact {
  margin-bottom: 5px;
}
.limit-text {
  color: green;
  margin-top: 5px;
}
.detail {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 10px;
  margin-top: 10px;
}
.notice {
  color: red;
  margin-top: 10px;
}
.vip-tip {
  color: blue;
  margin-top: 5px;
}
.sub-title {
  font-size: 16px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}
.link-text {
  color: red;
  margin-bottom: 10px;
}
.new-inquiry {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 10px;
  margin-top: 10px;
}
.page-info {
  float: right;
}
</style>
